<template>
	<view class='zhuti' @touchend='dragEnd'>
		<movable-area class="movable-area" :style='"display:" + movableViewInfo.showClass + "; height:" + "100%" + ";"'>
			<movable-view class='row list-row movable-row' out-of-bounds='true' damping='99999' @change="viewsChang"
				:style='"height:" + pageInfo.rowHeight + "px;"' direction="vertical" :y="movableViewInfo.y">
				<view class='col1 content'>{{ movableViewInfo.data.text }}</view>
				<view class="col3">
					<icon type='download' color='Gray' size='25' />
				</view>
			</movable-view>
		</movable-area>
		<scroll-view class="scroll-view_H" scroll-with-animation :scroll-y="isTrue">
			<block v-for="(item, index) in optionList">
				<view class='row list-row' v-show="action != item.id" :style='"height: " + pageInfo.rowHeight + "px;"'>
					<view class='col1 content'>{{ item.text }}</view>
					<view class="col3" @touchstart='dragStart' @touchmove='dragMove'>
						<icon type='download' color='Gray' size='25' :data-action="item.id" :data-index='index' />
					</view>
				</view>
			</block>
		</scroll-view>
	</view>
</template>
 
<script>
export default {
	data() {
		return {
			optionList: [{
				id: 1,
				text: "段落1 内容1"
			},
			{
				id: 2,
				text: "段落2 内容1"
			},
			{
				id: 3,
				text: "段落3 内容1"
			},
			{
				id: 4,
				text: "段落4 内容1"
			},
			{
				id: 5,
				text: "段落5 内容1"
			},
			{
				id: 6,
				text: "段落6 内容1"
			},
			{
				id: 7,
				text: "段落7 内容1"
			},
			{
				id: 8,
				text: "段落8 内容1"
			},
			{
				id: 9,
				text: "段落9 内容1"
			},
			{
				id: 10,
				text: "段落10 内容1"
			},
			{
				id: 11,
				text: "段落11 内容1"
			},
			{
				id: 12,
				text: "段落12 内容1"
			},
			{
				id: 13,
				text: "段落13 内容1"
			},
			{
				id: 14,
				text: "段落14 内容1"
			},

			],
			isTrue: true,
			isSorting: false,
			movableViewInfo: {
				y: 0,
				showClass: 'none', //'none' inline,
				data: {}
			},

			pageInfo: {
				rowHeight: 62,
				startIndex: null,
				scrollY: true,
				readyPlaceIndex: null,
				startY: 0,
				selectedIndex: null,
			},
			mainHeight: 0,
			moveH: 0,
			moveTop: 0,
			timer: null,
			outTime: null,
			heiBh: 0,
			//action是为了列表中隐藏当前拖拽的内容
			action: null
		}
	},
	onLoad() {
		const query = uni.createSelectorQuery().in(this);
		query.select('.zhuti').boundingClientRect(data => {
			console.log(data.height, 'height')
			this.mainHeight = data.height
		})


	},
	methods: {
		viewsChang(e) {
			this.heiBh = e.detail.y
			//定时间是拦截速度的,可以不用
			if (!this.timer) {
				this.timer = setInterval(() => {
					//1.7 和。1.3 是控制速度的,可以不用
					if (this.heiBh + (this.pageInfo.rowHeight * 1.7) >= this.mainHeight) {
						this.itemAdd(0)
					} else if (this.heiBh <= this.pageInfo.rowHeight / 1.3) {
						this.itemAdd(1)
					}
				}, 100)
			}
		},
		itemAdd(v) {
			this.isTrue = true
			if (this.outTime) return
			if (v == 0) {
				if (!this.optionList[this.pageInfo.selectedIndex + 1]) return this.isTrue = false
				this.outTime = setTimeout(() => {
					var selectedData = this.optionList[this.pageInfo.selectedIndex]
					this.optionList.splice(this.pageInfo.selectedIndex, 1)
					this.pageInfo.selectedIndex++
					this.optionList.splice(this.pageInfo.selectedIndex, 0, selectedData)
					this.outTime = null
				}, 100)
			} else {
				if (!this.optionList[this.pageInfo.selectedIndex + 1] || this.pageInfo.selectedIndex == 0)
					return this.isTrue = false
				this.outTime = setTimeout(() => {
					var selectedData = this.optionList[this.pageInfo.selectedIndex]
					this.optionList.splice(this.pageInfo.selectedIndex, 1)
					this.pageInfo.selectedIndex--
					this.optionList.splice(this.pageInfo.selectedIndex, 0, selectedData)
					this.outTime = null
				}, 100)
			}
		},
		dragStart(event) {
			this.isSorting = true
			var startIndex = event.target.dataset.index
			this.isTrue = false
			this.action = event.target.dataset.action
			// console.log('获取到的元素为', event, this.optionList[startIndex])
			// return
			// 初始化页面数据
			this.pageInfo.startY = event.touches[0].clientY
			this.pageInfo.readyPlaceIndex = startIndex
			this.pageInfo.selectedIndex = startIndex
			this.pageInfo.scrollY = false
			this.pageInfo.startIndex = startIndex
			this.movableViewInfo.y = this.pageInfo.startY - (this.pageInfo.rowHeight / 2)
			// 初始化拖动控件数据
			var movableViewInfo = this.movableViewInfo
			movableViewInfo.data = this.optionList[startIndex]
			movableViewInfo.showClass = "inline"
			this.movableViewInfo = movableViewInfo

		},
		dragMove(event) {
			console.log(event)
			// 计算拖拽距离
			var movedDistance = event.touches[0].clientY - this.pageInfo.startY
			this.movableViewInfo.y = this.pageInfo.startY - (this.pageInfo.rowHeight + 1 / 2) + movedDistance
			// console.log('移动的距离为', movedDistance)

			// 修改预计放置位置
			var movedIndex = parseInt(movedDistance / this.pageInfo.rowHeight)
			var readyPlaceIndex = this.pageInfo.startIndex + movedIndex
			if (readyPlaceIndex < 0) {
				readyPlaceIndex = 0
			} else if (readyPlaceIndex >= this.optionList.length) {

				readyPlaceIndex = this.optionList.length - 1
			}
			// console.log(event)
			if (readyPlaceIndex != this.pageInfo.selectedIndex) {
				var selectedData = this.optionList[this.pageInfo.selectedIndex]

				this.optionList.splice(this.pageInfo.selectedIndex, 1)
				this.optionList.splice(readyPlaceIndex, 0, selectedData)
				// console.log('======optionList',readyPlaceIndex)
				this.pageInfo.selectedIndex = readyPlaceIndex
			}
			// 移动movableView
			this.pageInfo.readyPlaceIndex = readyPlaceIndex
			// console.log('移动到了索引', readyPlaceIndex, '选项为', optionList[readyPlaceIndex])

		},
		dragEnd(event) {
			this.isSorting = false
			this.isTrue = true
			this.action = null
			// 重置页面数据
			this.pageInfo.readyPlaceIndex = null
			this.pageInfo.startY = null
			this.pageInfo.selectedIndex = null
			this.pageInfo.startIndex = null
			this.pageInfo.scrollY = true
			// 隐藏movableView
			this.movableViewInfo.showClass = 'none'
			clearInterval(this.timer)
			this.timer = null
		},
	}
};
</script>
 
<style lang="scss" scoped>
page {
	width: 100%;
	overflow: hidden;
}

.scroll-view_H {
	width: 100%;
	height: 700rpx;
}

.zhuti {
	height: 100%;
	width: 100%;
}

.row {
	height: 47px;
	width: 100%;

	display: flex;
	justify-content: space-around;
	align-items: center;
}

.title-row {
	border-bottom: 1px solid #888888;

	color: #888888;
}

.list-row {
	padding: 10px;
	border-bottom: 1px solid #D9D9D9;
	background-color: white;
	box-sizing: border-box;
	margin-bottom: 20px;
}

.movable-area {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	// background: #F0AD4E;
}

.movable-row {
	box-shadow: #D9D9D9 0px 0px 20px;
	// background: #4CD964;
}

.col1 {
	width: 60%;
}

.col3 {
	width: 10%;
}

.content {
	font-size: 17px;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
</style>